<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逐星科技社 - 加入我们</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#69b1ff',
                        dark: '#0f172a',
                        light: '#f8fafc'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .bg-glass {
                background: rgba(15, 23, 42, 0.7);
                backdrop-filter: blur(10px);
            }
            .frame-hover {
                @apply hover:shadow-xl hover:shadow-primary/20 transform transition-all duration-300 hover:-translate-y-1;
            }
        }
    </style>
</head>
<body class="bg-dark text-light min-h-screen">
    <!-- 导航栏 -->
    <header class="fixed top-0 left-0 right-0 z-50 bg-glass border-b border-gray-800 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center">
                <img src="images/第一版团标.png" alt="逐星科技社团标" class="w-20 h-15 mr-3">
                <h1 class="text-xl font-bold">逐星科技社</h1>
            </div>

            <!-- 桌面导航 -->
            <nav class="hidden md:flex space-x-8">
                <a href="index.html" class="hover:text-primary transition-colors py-1">首页</a>
                <a href="about.html" class="hover:text-primary transition-colors py-1">关于我们</a>
                <a href="activities.html" class="hover:text-primary transition-colors py-1">社团活动</a>
                <a href="culture.html" class="hover:text-primary transition-colors py-1">社团文化</a>
                <a href="council.html" class="hover:text-primary transition-colors py-1">理事会</a>
                <a href="regulations.html" class="hover:text-primary transition-colors py-1">规章制度</a>
                <a href="join.html" class="text-primary border-b-2 border-primary py-1">加入我们</a>
                <a href="thanks.html" class="hover:text-primary transition-colors py-1">特别感谢</a>
            </nav>

            <!-- 移动端菜单按钮 -->
            <button class="md:hidden text-2xl" id="menuBtn">
                <i class="fa fa-bars"></i>
            </button>
        </div>

        <!-- 移动端导航菜单 -->
        <div class="md:hidden hidden bg-dark border-t border-gray-800" id="mobileMenu">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
                <a href="index.html" class="hover:text-primary transition-colors py-2">首页</a>
                <a href="about.html" class="hover:text-primary transition-colors py-2">关于我们</a>
                <a href="activities.html" class="hover:text-primary transition-colors py-2">社团活动</a>
                <a href="culture.html" class="hover:text-primary transition-colors py-2">社团文化</a>
                <a href="council.html" class="hover:text-primary transition-colors py-2">理事会</a>
                <a href="regulations.html" class="hover:text-primary transition-colors py-2">规章制度</a>
                <a href="join.html" class="text-primary py-2">加入我们</a>
                <a href="thanks.html" class="text-primary py-2">特别感谢</a>
            </div>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="pt-32 pb-16 px-4 border-b border-gray-800">
        <div class="container mx-auto max-w-6xl">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold mb-4">加入我们</h1>
            <p class="text-gray-400 max-w-3xl">
                无论你是技术达人还是科技爱好者，只要你对科技充满热情，逐星科技社都欢迎你的加入
            </p>
        </div>
    </section>

    <!-- 加入选项框架 -->
    <section class="py-16 px-4">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-2xl md:text-3xl font-bold mb-10 text-center">加入我们的不同方式</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 加入社团框架 -->
                <div class="bg-gray-800/20 rounded-xl border border-gray-700 overflow-hidden frame-hover cursor-pointer" id="join-club-frame">
                    <div class="h-40 bg-primary/10 flex items-center justify-center">
                        <i class="fa fa-users text-primary text-5xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-3">加入社团</h3>
                        <p class="text-gray-400 mb-4">
                            成为逐星科技社正式成员，参与各类社团活动和项目
                        </p>
                        <div class="text-primary font-medium flex items-center">
                            <span>下载申请表</span>
                            <i class="fa fa-arrow-right ml-2"></i>
                        </div>
                    </div>
                </div>

                <!-- 加入官网工作室框架 -->
                <div class="bg-gray-800/20 rounded-xl border border-gray-700 overflow-hidden frame-hover cursor-pointer" id="join-website-frame">
                    <div class="h-40 bg-primary/10 flex items-center justify-center">
                        <i class="fa fa-code text-primary text-5xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-3">加入官网工作室</h3>
                        <p class="text-gray-400 mb-4">
                            参与社团官网的开发与维护，提升网站开发技能
                        </p>
                        <div class="text-primary font-medium flex items-center">
                            <span>申请加入</span>
                            <i class="fa fa-arrow-right ml-2"></i>
                        </div>
                    </div>
                </div>

                <!-- 加入机器人研发工作室框架 -->
                <div class="bg-gray-800/20 rounded-xl border border-gray-700 overflow-hidden frame-hover cursor-pointer" id="join-robot-frame">
                    <div class="h-40 bg-primary/10 flex items-center justify-center">
                        <i class="fa fa-cogs text-primary text-5xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-3">加入机器人研发工作室</h3>
                        <p class="text-gray-400 mb-4">
                            参与机器人项目研发，学习机器人技术与应用
                        </p>
                        <div class="text-primary font-medium flex items-center">
                            <span>申请加入</span>
                            <i class="fa fa-arrow-right ml-2"></i>
                        </div>
                    </div>
                </div>

                <!-- 加入宇宙观工作室框架 -->
                <div class="bg-gray-800/20 rounded-xl border border-gray-700 overflow-hidden frame-hover cursor-pointer" id="join-cosmos-frame">
                    <div class="h-40 bg-primary/10 flex items-center justify-center">
                        <i class="fa fa-globe text-primary text-5xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-3">加入宇宙观工作室</h3>
                        <p class="text-gray-400 mb-4">
                            探索宇宙奥秘，参与相关科普与研究活动
                        </p>
                        <div class="text-primary font-medium flex items-center">
                            <span>申请加入</span>
                            <i class="fa fa-arrow-right ml-2"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 为什么加入我们 -->
    <section class="py-16 px-4 bg-gray-900/30">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-2xl md:text-3xl font-bold mb-10 text-center">为什么加入我们？</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                <div class="flex">
                    <div class="flex-shrink-0 w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mr-6">
                        <i class="fa fa-microchip text-primary text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">提升技术能力</h3>
                        <p class="text-gray-400">
                            参与各种技术培训和实践项目，学习编程、科创、设计等多方面技能，提升个人技术水平。
                        </p>
                    </div>
                </div>

                <div class="flex">
                    <div class="flex-shrink-0 w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mr-6">
                        <i class="fa fa-users text-primary text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">结识志同道合的朋友</h3>
                        <p class="text-gray-400">
                            与一群对科技充满热情的同学交流学习，拓展人脉，结识志同道合的朋友，共同成长。
                        </p>
                    </div>
                </div>

                <div class="flex">
                    <div class="flex-shrink-0 w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mr-6">
                        <i class="fa fa-trophy text-primary text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">参与竞赛项目</h3>
                        <p class="text-gray-400">
                            有机会参与各类科技竞赛和创新项目，积累实践经验，为个人履历增添亮点。
                        </p>
                    </div>
                </div>

                <div class="flex">
                    <div class="flex-shrink-0 w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mr-6">
                        <i class="fa fa-lightbulb-o text-primary text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">展示创新想法</h3>
                        <p class="text-gray-400">
                            我们鼓励创新思维，为成员提供展示和实践自己创意的平台和机会。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 招募要求和咨询方式 -->
    <section class="py-16 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
                <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fa fa-info-circle text-primary mr-2"></i>
                        招募要求
                    </h3>
                    <ul class="space-y-3 text-gray-300">
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-3"></i>
                            <span>新宁一中在校学生，对科技有浓厚兴趣</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-3"></i>
                            <span>能够按时参加社团活动，遵守社团规章制度</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-3"></i>
                            <span>具备团队合作精神，乐于分享与交流</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-3"></i>
                            <span>有无基础均可，我们会提供系统培训</span>
                        </li>
                    </ul>
                </div>

                <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700">
                    <h3 class="text-xl font-semibold mb-4">其他咨询方式</h3>
                    <div class="space-y-4 text-gray-300">
                        <div class="flex items-center">
                            <i class="fa fa-envelope text-primary mr-4 w-5 text-center"></i>
                            <span>邮箱：zhuxing@example.com</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fa fa-qq text-primary mr-4 w-5 text-center"></i>
                            <span>QQ群：123456789</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fa fa-map-marker text-primary mr-4 w-5 text-center"></i>
                            <span>社团活动室：科技楼302室</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 社团风采展示 -->
    <section class="py-16 px-4 bg-gray-900/50">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-12">
                <h2 class="text-2xl md:text-3xl font-bold mb-4">社团风采</h2>
                <p class="text-gray-400 max-w-2xl mx-auto">
                    加入我们，你也可以参与这些精彩活动
                </p>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <img src="images/编程组第一课.JPG" alt="编程组活动" class="w-full h-40 object-cover rounded-lg hover:opacity-90 transition-opacity">
                <img src="images/科创组第一课.JPG" alt="科创组活动" class="w-full h-40 object-cover rounded-lg hover:opacity-90 transition-opacity">
                <img src="images/文体艺术节摆摊.jpeg" alt="文体艺术节摆摊活动" class="w-full h-40 object-cover rounded-lg hover:opacity-90 transition-opacity">
                <img src="images/新生大会.jpeg" alt="新生大会活动" class="w-full h-40 object-cover rounded-lg hover:opacity-90 transition-opacity">
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-900 border-t border-gray-800 py-12 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row justify-between mb-10">
                <div class="mb-8 md:mb-0">
                    <div class="flex items-center mb-4">
                        <img src="images/第一版团标.png" alt="逐星科技社团标" class="w-20 h-15 mr-3">
                        <h3 class="text-xl font-bold">逐星科技社</h3>
                    </div>
                    <p class="text-gray-400 max-w-md">
                        探索未知、勇敢创新，逐星科技社致力于为每一位对科学与技术怀有热情的学生提供广阔的学习平台。
                    </p>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
                    <div>
                        <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                        <ul class="space-y-2">
                            <li><a href="index.html" class="text-gray-400 hover:text-primary transition-colors">首页</a></li>
                            <li><a href="about.html" class="text-gray-400 hover:text-primary transition-colors">关于我们</a></li>
                            <li><a href="activities.html" class="text-gray-400 hover:text-primary transition-colors">社团活动</a></li>
                            <li><a href="join.html" class="text-gray-400 hover:text-primary transition-colors">加入我们</a></li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="text-lg font-semibold mb-4">资源中心</h4>
                        <ul class="space-y-2">
                            <li><a href="regulations.html" class="text-gray-400 hover:text-primary transition-colors">规章制度</a></li>
                            <li><a href="culture.html" class="text-gray-400 hover:text-primary transition-colors">社团文化</a></li>
                            <li><a href="council.html" class="text-gray-400 hover:text-primary transition-colors">理事会成员</a></li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                        <ul class="space-y-2">
                            <li class="flex items-center">
                                <i class="fa fa-envelope text-primary mr-2"></i>
                                <a href="mailto:zhuxing@example.com" class="text-gray-400 hover:text-primary transition-colors">boluochuixue@outlook.com</a>
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-qq text-primary mr-2"></i>
                                <span class="text-gray-400">1465153649</span>
                            </li>
                            <li class="flex items-center">

                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="border-t border-gray-800 pt-8 text-center text-gray-500 text-sm">
                <p>© 2024 逐星科技社 版权所有 | 新宁一中逐星科技合作社</p>
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        document.getElementById('menuBtn').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('hidden');
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('py-2');
                navbar.classList.remove('py-3');
                navbar.classList.add('shadow-lg');
            } else {
                navbar.classList.add('py-3');
                navbar.classList.remove('py-2');
                navbar.classList.remove('shadow-lg');
            }
        });

        // 加入社团框架点击事件 - 下载申请表
        document.getElementById('join-club-frame').addEventListener('click', function() {
            // 创建一个隐藏的a标签用于下载
            const downloadLink = document.createElement('a');
            downloadLink.href = 'images/逐星科技社成员申请简历表.docx';
            downloadLink.download = '逐星科技社成员申请简历表.docx';
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
        });

        // 其他框架点击事件 - 跳转到joinus.html
        const otherFrames = [
            document.getElementById('join-website-frame'),
            document.getElementById('join-robot-frame'),
            document.getElementById('join-cosmos-frame')
        ];

        otherFrames.forEach(frame => {
            frame.addEventListener('click', function() {
                window.location.href = 'joinus.html';
            });
        });
    </script>
</body>
</html>
